<template>
	<view class="page-body" :style="'height:' + height + 'px'">
		<scroll-view class="nav-left" scroll-y :style="'height:' + height + 'px'" :scroll-top="scrollLeftTop"
			scroll-with-animation>
			<view class="nav-left-item" @click="categoryClickMain(index,item)" :key="index"
				:class="item.id == categoryActive ? 'active' : ''" v-for="(item, index) in classifyData">
				{{ item.name }}
			</view>
		</scroll-view>
		<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" :style="'height:' + height + 'px'"
			scroll-with-animation>
			<!-- <view v-for="(foods, index) in classifyData" :key="index" class="box" v-if="categoryActive == index"> -->
			<view :id="i == 0 ? 'first' : ''" class="nav-right-item" v-for="(item, i) in dataList" :key="i"
				@click="cart(item)">
				<image :src="$imageOss(item.image)" />
				<view class="right">
					<view class="title">
						{{ item.title }}
					</view>
					<view class="">
						{{ item.author }}
					</view>
					<view class="">
						<u-icon name="play-circle-fill" color="#466EC5" size="14"></u-icon>
						<view class="" style="margin-left: 10rpx;">{{ item.read }}人</view>
					</view>
				</view>
			</view>
			<!-- </view> -->
			<u-loadmore :status="status" />
		</scroll-view>
	</view>
</template>

<script>
	import {
		bookCategory,
		bookList
	} from "@/request/homeApi.js";
	export default {
		data() {
			return {
				name: 'wkiwi',
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				// scrollHeight: 0,
				classifyData: [],
				dataList: [],
				arr: [0, 584, 1168, 1752, 2336, 2805, 3274, 3858, 4442, 4911, 5380, 5734, 6203, 6672,
					7017
				], //初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51, //49行会计算出新值进行覆盖
				navLeftHeight: 0, //左边scroll-view 内层nav的总高度
				diff: 0, //左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight: 0, //如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
				queryForm: {
					title: '',
					book_category_id: null,
					type: '',
					page: 1,
					limit: 10,
					recommend: ''
				},
				id: null,
				last_page: 1,
				status: "nomore", // 加载状态
			};
		},
		created() {
			//如果你的分类数据为后台异步获取请	将下方代码放置你的数据回调中
			// this.$nextTick(()=>{
			// 	this.getHeightList();
			// })
		},
		onLoad(e) {
			this.id = e.id
			this.queryForm.book_category_id = e.pid
			this.categoryActive = e.pid;
			this.getList()
			this.getDetail()
			this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight;
		},
		onReady() {
			this.getHeightList();
		},
		onReachBottom() {
			let that = this
			if (that.queryForm.page < that.last_page) {
				that.queryForm.page = that.queryForm.page + 1
				that.getDetail()
			}
		},
		methods: {
			getList() {
				let _this = this;
				bookCategory({
					pid: 0
				}).then(res => {
					if (res.code == 200) {
						_this.classifyData = res.data.filter(item => item.id == _this.id)[0].arr
						_this.$nextTick(() => {
							_this.getHeightList();
						})
					}else{
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
					}
				})
			},
			getDetail() {
				let _this = this;
				bookList(_this.queryForm).then(res => {
					if (res.code == 200) {
						_this.dataList = _this.dataList.concat(res.data.list)
						_this.last_page = Math.ceil(res.data.count / res.data.list.length)
						res.data.count == 0 ? _this.status = 'nomore' : _this.status = ''
					}else{
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
					}
				})
			},
			getHeightList() {
				let _this = this;
				let selectorQuery = uni.createSelectorQuery();
				selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
					_this.leftItemHeight = rects[0].height;
					_this.navLeftHeight = _this.leftItemHeight * _this.classifyData.length;
					_this.diff = _this.navLeftHeight - _this.height;
				});
				selectorQuery
					.selectAll('.box')
					.boundingClientRect(function(rects) {
						let arr = [0];
						let top = 0;
						rects.forEach(function(rect) {
							rect.id // 节点的ID
							rect.dataset // 节点的dataset
							rect.left // 节点的左边界坐标
							rect.right // 节点的右边界坐标
							rect.top // 节点的上边界坐标
							rect.bottom // 节点的下边界坐标
							rect.width // 节点的宽度
							rect.height // 节点的高度
							top += rect.height;
							arr.push(top);
						});
						console.log(arr);
						_this.arr = arr;
					})
					.exec();
			},
			categoryClickMain(index, item) {
				this.categoryActive = item.id;
				this.queryForm.book_category_id = item.id
				this.dataList = []
				this.getDetail()

				// this.scrollTop == this.arr[index] ? (this.scrollTop = this.scrollTop + 1) : (this.scrollTop = this.arr[index]); //防止两次相等造成点击不触发滚动时间
			},
			cart(item) {
				console.log(item, 'item')
				setTimeout(() => {
					uni.navigateTo({
						url: `/pages/home/startReading?id=${item.id}`
					})
				}, 1000)
			}
		},
		components: {}
	};
</script>

<style lang="scss">
	.page-body {
		display: flex;
		background: #fff;
		overflow: hidden;
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 25%;
		// margin: 30rpx 0;
		background: #fafafa;
	}

	.nav-left-item {
		height: 90upx;
		border-right: solid 1px #f1f1f1;
		border-bottom: solid 1px #f1f1f1;
		font-size: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-left-item:last-child {
		border-bottom: none;
	}

	.nav-right {
		width: 75%;
	}

	.box {
		display: block;
		overflow: hidden;
		border-bottom: 20upx solid #f3f3f3;
		/* min-height: 100vh; */
		/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
	}

	.box:last-child {
		border: none;
		min-height: 100vh;
	}

	.nav-right-item {
		width: 98%;
		height: 114rpx;
		padding: 10rpx;
		font-size: 30rpx;
		background: #fff;
		margin: 10rpx;
		display: flex;
		align-items: center;

		image {
			width: 160rpx;
			height: 110rpx;
			border-radius: 10rpx;
		}

		.right {
			margin-left: 20rpx;
			color: #909090;
			font-size: 24rpx;
			width: 320rpx;

			view {
				height: 38rpx;
				line-height: 38rpx;
			}

			.title {
				color: #000;
				font-size: 28rpx;
				margin-bottom: 4rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			view:last-child {
				display: flex;
				align-items: center;
			}
		}
	}



	.active {
		color: #466EC5;
		background: #466EC533;
		border-right: 0;
	}

	::-webkit-scrollbar {
		/*取消小程序的默认导航条样式*/
		width: 0;
		height: 0;
		color: transparent;
	}
</style>